import { Card, theme, Button, Carousel } from 'antd';
import { SmileOutlined} from '@ant-design/icons';
import { useEffect, useState } from 'react';
import { Alert, Col, Row } from 'antd';
import Marquee from 'react-fast-marquee';
import RiLi from '@/components/utils/Calendar';
const { Meta } = Card;
const Welcome: React.FC = () => {
  const { token } = theme.useToken();
  const [loadings, setLoadings] = useState(true);
  const [com, setCom] = useState('地图加载中...');
  // console.log(loadings)
  // 加载页面时，加[] 只更新一次
  useEffect(() => {
    window.scrollTo(0, 30)// 将当前滚动位置加上24px
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=e0f1536df688c39cd1408a7b22ba3279';
    // script.src = "https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js";
    script.onerror = () => {
      // throw new Error('加载高德地图API失败');
      console.log("加载高德地图API失败")
    };

    document.head.appendChild(script);
    script.onload = () => {
      // const map = new AMap.Map('container', {
      //     zoom: 11,
      // });
      // map.on("complete", function(){
      //    log.success("地图加载完成！");  
      // });
      // 初始化地图  
      const map = new AMap.Map('container', {
        zoom: 12, // 初始缩放级别  
        center: [113.298236, 23.07907] // 中山大学（广州）的经纬度  
      });

      // 创建一个标记并设置其标签  
      const marker = new AMap.Marker({
        position: [113.298236, 23.07907],
        title: '广州鸿洲国际轻纺城',
        label: {
          offset: new AMap.Pixel(20, -20), // 标签相对于标记的偏移量  
          content: '广州鸿洲国际轻纺城', // 标签内容  
          direction: 'right' // 标签的方向  
        }
      });

      // 将标记添加到地图上  
      marker.setMap(map);
      setLoadings(false)
      setCom("地图加载完成")
    };
    // 加载其他脚本或执行其他操作
    const otherScript = document.createElement('script');
    otherScript.type = 'text/javascript';
    otherScript.src = "https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js";
    otherScript.onload = () => {
      // 其他脚本加载完成后执行的操作
      console.log('其他脚本加载完成');

    };
    document.head.appendChild(otherScript);


  }, []);
  // 轮播图片
  const imgList = [
    {
      img: 'assets/img/001.png',
      title: '岭南山丘'
    },
    {
      img: 'assets/img/004.png',
      title: '烟雨江南'
    },
    {
      img: 'assets/img/002.png',
      title: '夕阳西下'
    },
    {
      img: 'assets/img/005.png',
      title: '文艺清新'
    },
  ]
  // 轮播图的幻灯片内容  <img src={imgSrc} alt={`image ${index + 1}`} style={{ width: '100%',height: '200px', }} />
  const slides = imgList.map((imgSrc, index) => (
    <div key={index}>
      <div style={{
        backgroundImage: `url(${imgSrc.img})`,
        backgroundSize: 'cover', // 确保背景图片覆盖整个div  
        backgroundPosition: 'center', // 图片居中显示  
        width: '100%',
        height: '200px',
        textAlign: 'center',
        lineHeight: '66px',
      }}>
        <span style={{ color: '#fff', fontSize: '22px', fontWeight: '800' }}>{imgSrc.title}</span>
      </div>
    </div>
  ));
  // 展示图片
  const showList = [
    {
      img: 'assets/img/008.png',
      title: 'Keep',
      des: '快看看，这都几点了哎呀，还不跑步？'
    },
    {
      img: 'assets/img/008.png',
      title: '小米运动健康',
      des: '说真的，今天你锻炼了吗？'
    },
    {
      img: 'assets/img/008.png',
      title: '华为运动健康',
      des: '小东西，吃我一肘击！'
    },
    {
      img: 'assets/img/007.png',
      title: '麻辣兔头',
      des: '噢噢噢噢噢噢噢噢噢噢噢噢'
    },
    {
      img: 'assets/img/007.png',
      title: '红烧兔头',
      des: '红烧兔头噢噢噢噢噢噢噢噢噢噢噢噢'
    },
    {
      img: 'assets/img/007.png',
      title: '红烧兔头',
      des: '红烧兔头噢噢噢噢噢噢噢噢噢噢噢噢'
    }
  ]

  return (
    <>
      <Carousel arrows centerMode autoplay  >
        {slides}
      </Carousel>
      <Alert
        banner
        message={
          <Marquee pauseOnHover gradient={false}>
            您好！欢迎使用佳立中后台开发系统，本系统正在火热开发中......  请尽情期待更多功能噢~   .<SmileOutlined />.
          </Marquee>
        }
      />
      <Card
        style={{
          borderRadius: 8,
        }}
      >
        <div
          style={{
            backgroundPosition: '100% -30%',
            backgroundRepeat: 'no-repeat',
            backgroundSize: '274px auto',
            backgroundImage:
              "url('https://gw.alipayobjects.com/mdn/rms_a9745b/afts/img/A*BuFmQqsB2iAAAAAAAAAAAAAAARQnAQ')",
          }}
        >
          <div
            style={{
              fontSize: '20px',
              color: token.colorTextHeading,
              textAlign: 'center',
            }}
          >
            <h2>欢迎来到 广州佳立供应链服务有限公司官网~ </h2>
          </div>
          <p
            style={{
              fontSize: '14px',
              color: token.colorTextSecondary,
              lineHeight: '22px',
              marginTop: 16,
              marginBottom: 32,
              width: '65%',
            }}
          >
            &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;广州佳立供应链服务有限公司经营范围包括供应链管理服务；
            采购代理服务；贸易经纪；服装服饰批发；服装服饰零售；针纺织品销售；针纺织品及原料销售；企业管理咨询；
            企业管理；企业形象策划。
          </p>
          <div
            style={{
              // display: 'flex',
              // flexWrap: 'wrap',
              // gap: 16,
            }}
          >
            {/* <Button type="primary" danger loading={loadings} >{com}</Button> */}
          </div>
          <Row style={{ marginTop: '10px', height: '320px' }}>
            <Col span={16}>
              <div id="container" style={{ width: '97%', height: '100%' }}>
                <Button type="primary" danger loading={loadings} >{com}</Button>
              </div>
            </Col>
            <Col span={8} >
              <div style={{ width: '94%', paddingLeft: '40px' }}><RiLi></RiLi></div>
            </Col >

          </Row>
        </div>
        <Row style={{marginTop:"15px"}}>
          {showList.map((imgSrc, index) => (
            <Col span={8} key={index}>
              <Card
                hoverable
                style={{ width: "90%", padding: '12px',margin:"5px" }}
                cover={<img alt="example" src={imgSrc.img} />}
              >
                <Meta title={imgSrc.title} description={imgSrc.des} />
              </Card>
            </Col>
          ))}
        </Row>
      </Card>

    </>);
};

export default Welcome;

